import React, { Component } from 'react'
import url from '../../config/url'
import req from '../../http/req'
import * as echarts from 'echarts'
import moment from 'moment'
export default class Welcome extends Component {
  state = {
    // 来源
    accessFrom: [],
    // 区域
    area: [],
    // 性别
    gender: []
  }
  componentDidMount() {
    req.get(url.GetData).then((res) => {
      // console.log(res)
      const { accessFrom, area, gender } = res.data.data
      // 数据请求回来后,并存储到state中,再去渲染图表 回调函数
      this.setState({ accessFrom, area, gender }, () => {
        var chartDom = document.getElementById('main')
        var myChart = echarts.init(chartDom)
        var option

        option = {
          title: {
            text: '会员性别分布',
            subtext: '截止: '+moment().format('YYYY-MM-DD'),
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a}<br/>{b}：{c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '性别',
              type: 'pie',
              radius: '50%',
              data: this.state.gender,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }

        option && myChart.setOption(option)
      })
    })
  }
  render() {
    return <div id="main" style={{ height: '600px', width: '100%' }}></div>
  }
}
